<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { reqNoticeNoteById } from '@/api/teacher/record/notice';
import { useTeacherStore } from '@/stores/modules/teacherStore.js';
import { showFailToast } from 'vant';

const route = useRoute();
const router = useRouter();

const teacherStore = useTeacherStore();

const notice = ref({});

onMounted(async () => {
    try {
        const result = await reqNoticeNoteById(
            route.query.id,
            teacherStore.teacherId
        );

        if (result.status == 200) {
            notice.value = result.data;
        } else {
            throw new Error(result?.statusText);
        }

        console.log(result);
    } catch (e) {
        showFailToast(e.message || '公告获取失败');
        router.push({ name: 'home-teacher' });
    }
});
</script>

<template>
    <div class="container">
        <header class="header">通知详情</header>
        <section class="notice">
            <h4 class="notice__title">{{ notice?.title }}</h4>
            <p class="notice__content">{{ notice?.main }}</p>
            <div class="notice__author">{{ notice?.addressor }}</div>
        </section>
        <section class="state">
            <div class="read" v-if="notice?.readStuName?.length">
                <span>{{ notice?.readStuName?.length || '无' }}人已读: </span>
                <span>
                    {{ notice?.readStuName.join(',') }}
                </span>
            </div>
            <div class="unread" v-if="notice?.unreadStuName?.length">
                <span>{{ notice?.unreadStuName?.length }}人未读: </span>
                <span> {{ notice?.unreadStuName.join(',') }} </span>
            </div>
        </section>
    </div>
</template>

<style scoped lang="scss">
.container {
    font-size: 14rem;
    background-color: rgb(247, 247, 247);
}

.header {
    color: #fff;
    font-size: 15rem;
    height: 40rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(84, 153, 199);
}

.notice {
    padding: 0 10rem;

    &__title {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 20rem 0;
        font-weight: bold;
        font-size: 18rem;
    }

    &__content {
        text-align: left;
        text-indent: 2em;
        margin: 30rem auto;
        line-height: 25rem;
    }

    &__author {
        text-align: right;
        margin: 0 10rem;
    }
}

.state {
    margin: 0 10rem;
    margin-top: 20rem;

    div {
        margin: 10rem 0;
    }
}
</style>
